<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8" :offset="0">
        <el-input v-model="name" placeholder="输入岗位名称进行筛选"></el-input>
      </el-col>
      <el-col :span="8" :offset="0">
        <el-select v-model="category" placeholder="请选择分类" clearable>
          <el-option
            v-for="item in cateList"
            :key="item.objectId"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="8" :offset="0">
        <el-button type="primary" size="default" @click="handleSearch"
          >查询</el-button
        >
      </el-col>
    </el-row>
    <el-table :data="jobList" border stripe>
      <el-table-column prop="jobName" label="岗位名称" />
      <el-table-column prop="salaryDesc" label="薪资待遇" />
      <el-table-column prop="cityName" label="城市" />
      <el-table-column prop="lv1" label="分类" />
      <el-table-column prop="jobDegree" label="学历" />
      <el-table-column prop="jobExperience" label="工作经验" />
    </el-table>
    <el-pagination
      @current-change="handleChange"
      current-page.sync="1"
      :page-size="10"
      layout="total, prev, pager, next, jumper"
      :total="total"
      background
      :pager-count="7"
    />
  </div>
</template>

<script>
import { mapState } from "vuex";
import { jobGet } from "@/api/job";
export default {
  data() {
    return {
      name: "",
      category: "",
      jobList: [],
      total: 0,
    };
  },
  computed: {
    ...mapState({
      cateList: (state) => state.category.cateList,
    }),
  },
  created() {
    this.$store.dispatch("category/getCategoryAct");
    jobGet().then((res) => {
      console.log(res);
      let { count, results } = res.data;
      this.jobList = results;
      this.total = count;
    });
  },
  methods: {
    handleChange(current) {
      console.log(current);
      jobGet(current).then((res) => {
        let { count, results } = res.data;
        this.jobList = results;
        this.total = count;
      });
    },
    handleSearch() {
      let { name, category } = this;
      jobGet(1, name, category).then((res) => {
        let { count, results } = res.data;
        this.jobList = results;
        this.total = count;
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
